<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
            background-color: #000;
            }
            ul {
            list-style-type: none;
            background-image: url(navi_bg.png);
            height: 80px;
            width: 663px;
            margin: auto;
            }
            ul a {
            background-image: url(navi_bg_divider.png);
            background-repeat: no-repeat;
            background-position: right;
            padding-right: 32px;
            padding-left: 32px;
            display: block;
            line-height: 80px;
            text-decoration: none;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 21px;
            color: #371C1C;
            }
            ul a:hover {
            color: #FFF;
            }
            li {
            float: left;
            }
        </style>
        <title>{{ index_title_page }}</title>
    </head>

    <body>
        <form name="index" method="get" action="">
            <ul>
                <li><a id="home" href="#">{{ index_home }}</a></li>
                <li><a id="products" href="#">{{ index_products }}</a></li>
                <li><a id="services" href="#">{{ index_services }}</a></li>
                <li><a id="about" href="#">{{ index_about }}</a></li>
                <li><a id="contact" href="#">{{ index_contact }}</a></li>
            </ul>
        </form>
    </body>
</html>